<script setup>
import {list_operation_log} from "@/apis/system/v1/log/operation_log.js";
import Button from "@/components/common/button.vue";
import requestDes from "@/mixins/request_msg.js";

const {request_des} = requestDes();
const emit = defineEmits(['search']);
const isSearch = ref(true);
const visible = ref(false);
const search = () => {
  isSearch.value = !isSearch.value;
  emit("search", isSearch.value);
};
const select = () => {
  visible.value = true;
};
const expandable = ref({
  title: '',
  width: 80,
})
const page = ref(1);
const pageSize = ref(10);
const total = ref(0);
const form = reactive({
  loading: false,
  request_username: true,
  request_path: true,
  request_ip: true,
  address: true,
  msg: true,
  request_os: true,
  request_browser: true,
  request_time: true,
  response_code: true,
  create_datetime: true,
});
const pagination = (e) => {
  page.value = e;
  getOperationLogList();
};
const renovate = () => {
  form.loading = !form.loading;
  setTimeout(() => {
    getOperationLogList();
    form.loading = !form.loading;
  }, 1000);
};
const operationLogList = ref([]);
const permissions = ["sys:operation:view", "sys:operation:update", "sys:operation:delete", "sys:operation:add"];
const getOperationLogList = () => {
  list_operation_log(page.value, pageSize.value).then(res => {
    form.loading = !form.loading;
    if (res.code === 200) {
      total.value = res.result.total;
      operationLogList.value = res.result.items;
      operationLogList.value.map(item => {
        item.key = item.id;
        item.expand = "请求参数：" + item.request_body;
      });
      form.loading = !form.loading;
    }
  });
};
const json_result = ref({});
const isView = ref(false);
const closeView = () => {
  isView.value = false;
};
const getOperationLogObj = (json) => {
  json = json.replace(/'/g, '"');
  json_result.value = json;
  try {
    json_result.value = JSON.stringify(JSON.parse(json), null, '\t');
  } catch (err) {
    json_result.value = json;
  }
  isView.value = true;
};
onMounted(() => {
  getOperationLogList()
});
</script>

<template>
  <div class="jia-handle">
    <Button :permissions="permissions"></Button>
    <div class="jia-operate">
      <div style="border-radius: 5px 0 0 5px" class="jia-flex-center"
           @click="search">
        <icon-search size="14"/>
      </div>
      <div class="jia-flex-center" @click="renovate">
        <icon-sync size="14"/>
      </div>
      <div style="border-radius: 0 5px 5px 0" class="jia-flex-center" @click="select">
        <icon-select-all size="14"/>
        <a-modal v-model:visible="visible" draggable
                 title="菜单选项" width="200px">
          <a-checkbox v-model="form.request_username">用户名</a-checkbox>
          <a-checkbox v-model="form.request_path">请求地址</a-checkbox>
          <a-checkbox v-model="form.request_ip">IP地址</a-checkbox>
          <a-checkbox v-model="form.address">IP来源</a-checkbox>
          <a-checkbox v-model="form.request_browser">浏览器</a-checkbox>
          <a-checkbox v-model="form.request_os">操作系统</a-checkbox>
          <a-checkbox v-model="form.msg">描述</a-checkbox>
          <a-checkbox v-model="form.response_code">响应状态码</a-checkbox>
          <a-checkbox v-model="form.request_time">请求耗时</a-checkbox>
          <a-checkbox v-model="form.create_datetime">创建时间</a-checkbox>
        </a-modal>
      </div>
    </div>
  </div>
  <a-table v-if="operationLogList.length > 0" :expandable="expandable"
           :data="operationLogList" show-empty-tree :loading="form.loading"
           :pagination="false">
    <template #columns>
      <a-table-column v-if="form.request_username" title="用户名" data-index="request_username"></a-table-column>
      <a-table-column v-if="form.request_path" title="请求地址" data-index="request_path"></a-table-column>
      <a-table-column v-if="form.request_ip" title="IP地址" data-index="request_ip"></a-table-column>
      <a-table-column v-if="form.address" title="IP来源" data-index="address"></a-table-column>
      <a-table-column v-if="form.msg" title="描述" data-index="msg">
        <template #cell="{ record }">
          <span>{{ request_des(record.request_method, record.request_path, record.id) }}</span>
        </template>
      </a-table-column>
      <a-table-column v-if="form.request_os" title="操作系统" data-index="request_os"></a-table-column>
      <a-table-column v-if="form.request_browser" title="浏览器" data-index="request_browser"></a-table-column>
      <a-table-column v-if="form.response_code" title="响应状态码" data-index="response_code"></a-table-column>
      <a-table-column v-if="form.request_time" title="请求耗时" data-index="request_time">
        <template #cell="{ record }">
          <a-tag style="border-radius: 6px" color="blue">{{ record.request_time }}ms</a-tag>
        </template>
      </a-table-column>
      <a-table-column v-if="form.create_datetime" title="创建时间" data-index="create_datetime"></a-table-column>
      <a-table-column :width=50 title="操作" data-index="operate">
        <template #cell="{ record }">
          <a-button v-if="record.type !== 0" class="table-button" type="primary" status="success"
                    @click="getOperationLogObj(record.json_result)">
            <template #icon>
              <icon-eye/>
            </template>
          </a-button>
        </template>
      </a-table-column>
    </template>
  </a-table>
  <div class="jia-pagination">
    <a-pagination @change="pagination" :current="page" :total="total" show-total show-jumper show-page-size/>
  </div>
  <a-drawer :width="950" :visible="isView" unmountOnClose
            @ok="closeView" @cancel="closeView" title="返回信息">
    <a-card>
      <a-textarea style="height: 100%" auto-size v-model="json_result" show-word-limit></a-textarea>
    </a-card>
  </a-drawer>
</template>

<style scoped lang="less">
.jia-handle {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .jia-operate {
    width: 135px;
    height: 100%;
    display: flex;

    div {
      cursor: pointer;
      width: 44px;
      height: 29px;
      color: #885DFD;
      border: 1px solid #e8e8e8;

      &:nth-child(2) {
        border-left: none;
        border-right: none;
        border-top: 1px solid #e8e8e8;
        border-bottom: 1px solid #e8e8e8;
      }

      &:hover {
        background: var(--active-bg1);
      }
    }
  }
}
</style>